<template>
  <div id="app-container">
    <div>
      <h3 style="text-align: left;">待处理签约</h3>
    </div>

    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">

      <!--签约状态 -->
      <el-form-item label="签约状态">
        <el-select v-model="querySignVo.signStatusId" clearable placeholder="请选择">
          <el-option
            v-for="signStatus in signStatusList"
            :key="signStatus.id"
            :label="signStatus.name"
            :value="signStatus.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="签约机构">
        <el-select v-model="querySignVo.organizationId" clearable placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="organization in organizationList"
            :key="organization.id"
            :label="organization.name"
            :value="organization.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="医生团队">
        <el-select v-model="querySignVo.teamId" clearable placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="team in teamList"
            :key="team.id"
            :label="team.name"
            :value="team.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="default" @click="">导出</el-button>

      <el-form-item label="服务包">
        <el-select v-model="querySignVo.packageId" clearable placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="packages in packageList"
            :key="packages.id"
            :label="packages.name"
            :value="packages.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择日期">
        <el-date-picker
          v-model="querySignVo.createTime"
          type="datetime"
          placeholder="请选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"/>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="querySignVo.updateTime"
          type="datetime"
          placeholder="请选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"/>
      </el-form-item>

<!--      <el-form-item label="选择日期">
        <el-date-picker
          v-model="querySignVo.createTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="修改日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>-->


      <el-form-item>
        <el-input v-model="querySignVo.name" prefix-icon="el-icon-search"placeholder="请输入关键字" @change="getList(-1)"></el-input>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>

      <i class="el-icon-nested"></i>
      <i class="el-icon-menu"></i>
    </el-form>

    <!--数据显示列表-->
    <el-table ref="multipleTable" v-loading="loading" :stripe="true" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column prop="id"  label="编号" width="120"></el-table-column>

      <el-table-column label="签约人姓名" width="80">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>

      <el-table-column prop="code" label="身份证号" width="140"></el-table-column>

      <el-table-column prop="id" label="手机号码" width="120"></el-table-column>

      <el-table-column prop="signStatus" label="签约状态"></el-table-column>

      <el-table-column prop="teamName" label="签约医生团队" width="120"></el-table-column>

      <el-table-column prop="packageName" label="签约服务包" width="120"></el-table-column>

      <el-table-column prop="updateTime" label="最后修改时间" width="120"></el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">

          <router-link :to="'/sign/detail/' + scope.row.id">
            <el-link type="primary" size="mini" icon="el-icon-edit">查看详情</el-link>
          </router-link>
          <router-link :to="'/sign/edit/' + scope.row.id">
            <el-link type="primary" size="mini" icon="el-icon-edit">编辑</el-link>
          </router-link>

        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>
<script>

import sign from "../../../api/sign";
import userSignStatus from "../../../api/userSignStatus";
import organization from "../../../api/admin/organization";
import team from "../../../api/admin/team";
import packagePlus from "../../../api/packagePlus";

  export default {
    data(){
      return {
        listLoading: true,                // 加载数据
        querySignVo: {},                  // 查询条件对象
        currentPage: 1,                   // 当前页
        pageSize: 3,                      // 每页记录数
        dataList:[],                      // 分页数据
        total: 0,                         // 总记录数
        dialogVideoFormVisible: false,    // 维护页面不可见
        sign: {},                         //维护表单数据模型
        status: [],                       //所有的培训师头衔
        signStatusList: [],               //签约状态查询
        organizationList: [],             //机构数组
        teamList: [],                     //团队数组
        packageList: [],                  //服务包数组
        pickerOptions: {                  //日期选择器快捷跳转
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        loading: true,                    //加载动画
      }
    },

    methods: {
      //选择变化
      handleSelectionChange(){},
      // 页面初始化查询数据
      getList(value){

        if(value == -1){
          // 点击搜索之后应该从第一页开始查询
          this.currentPage = 1;
        }
        // 此处应该调用api里面的相关方法 getList
        sign.getList(this.currentPage, this.pageSize, this.querySignVo).then(res => {
          // 以前要获取响应的数据  res.data  拿到的此时result对象
          // 此处 res就是result对象
          // 将查询出来的分页数据赋值给数据模型
          console.log(res.data.data);
          this.dataList = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        });
      },
      // 签约状态查询
      getSignStatusList(){
        userSignStatus.queryAll().then(res => {
          this.signStatusList = res.data;
        });
      },
      // 机构查询
      getOrganizationList(){
        organization.getAll().then(res => {
          this.organizationList = res.data;
        });
      },
      // 团队状态查询
      getTeamList(){
        team.queryAll().then(res => {
          this.teamList = res.data;
        });
      },
      // 服务包查询
      getPackageList(){
        packagePlus.queryAll().then(res => {
          this.packageList = res.data;
        });
      },

      // 每页记录数发生变化
      handleSizeChange(size){
        this.pageSize = size;
        this.getList();
      },
      // 当前页发生变化
      handleCurrentChange(current){
        this.currentPage = current;
        this.getList();
      },
      // 清空查询数据
      resetData(){
        // 清空搜索的内容
        this.signQueryVo = {};
        // 重新查询数据
        this.getList();
      },

      /**
       * 图片上传成功之后回调该函数
       * @param res   响应回来的数据,通过该对象可以获得响应数据
       * @param file  上传的图片file
       */
      handleAvatarSuccess(res, file) {
        console.log("上传图片响应回来的数据为:" + res.data);
        //this.sign.image = "http://rj0158yod.hd-bkt.clouddn.com/" + res.data;

        this.sign.image = res.data;
      },
      /**
       * 图片上传之前触发该函数，一般用于图片的大小，后缀等信息的校验
       * @param file    上传的图片file
       * @returns {boolean}
       */
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    },
    created(){
      this.getList();
      this.getSignStatusList();
      this.getOrganizationList();
      this.getTeamList();
      this.getPackageList();
    }
  }
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
